<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-0ZJQN9ZQ47"></script>
  <script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-0ZJQN9ZQ47');
  </script>
  <meta charset="utf-8">
  <title>番茄工作法官方特许番茄钟的设计瑕疵 &mdash; 褪色的抽象</title>
  <meta name="author" content="Kaffa">






  <!-- http://t.co/dKP3o1e -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">


    <link href="./favicon.ico" rel="icon">

  <link href="./theme/css/main.css" media="screen, projection"
        rel="stylesheet" type="text/css">
  <!--
  <link href="//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic"
        rel="stylesheet" type="text/css">
  <link href="//fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic"
        rel="stylesheet" type="text/css">
  -->
</head>

<body>
  <header role="banner"><hgroup>
  <h1><a href="./"><span style="color:#52A2C6">褪</span>
<span style="color:#6791BC">色</span>
<span style="color:#7C80B2">的</span>
<span style="color:#916FA8">抽</span>
<span style="color:#A65E9E">象</span></a></h1>
    <h2>kaffa's blog</h2>
</hgroup></header>
  <nav role="navigation"><ul class="subscription" data-subscription="rss">
</ul>


<ul class="main-navigation">
    <li><a href="/">首页</a></li>
    <li><a href="/category/sui-bi.html">随笔</a></li>
    <li><a href="/category/yue-du.html">阅读</a></li>
    <li><a href="/category/ren-wen.html">人文</a></li>
    <li><a href="/category/zi-ran.html">自然</a></li>
    <li><a href="/category/ri-zhi.html">日志</a></li>
</ul></nav>
  <div id="main">
    <div id="content" class="bronze">
<div>
  <article class="hentry" role="article">
<header>
      <h1 class="entry-title">番茄工作法官方特许番茄钟的设计瑕疵</h1>
    <p class="meta">
<time datetime="2020-12-03T12:00:00+08:00" pubdate>2020-12-03 周四</time>    </p>
</header>

  <div class="entry-content"><div class="section" id="section-2">
<h2>番茄工作法</h2>
<img alt="普通番茄钟" src="https://kaffa.im/img/2020/pomodoro-logo.png" />
<p>番茄工作法（英语：<a class="reference external" href="https://francescocirillo.com/">Pomodoro Technique</a>）是一种时间管理法，在 1980 年代由 Francesco Cirillo 创立。
该方法使用一个定时器来分割出一段工作时间（一般为 25 分钟）和一段休息时间（一般为 5 分钟）。
而这些时间段被称为 pomodoros，是意大利语单词 pomodoro 的复数形式，中文即番茄。</p>
</div>
<div class="section" id="section-3">
<h2>番茄工作法的五个步骤</h2>
<img alt="番茄钟周期" src="https://kaffa.im/img/2020/one-pomodoro-cycle.jpg" />
<ol class="arabic simple">
<li>选择你想完成的任务；</li>
<li>设定番茄钟为 25 分钟；</li>
<li>持续工作直至番茄钟提示；</li>
<li>当番茄钟提示，记一个番茄；</li>
<li>短暂休息 5 分钟；每积累 4 个番茄，可进行长时间休息（15-30分钟）。</li>
</ol>
</div>
<div class="section" id="section-4">
<h2>现实中的番茄钟</h2>
<p>现实中的番茄钟有机械（以发条为动力）、电子（液晶与单片机）、软件（PC和移动设备）等不同形式，可根据个人喜好挑选。
机械钟和电子钟对比软件钟的优点是即开即用，且更具象化。当你开始一个“番茄”，你只需要拿出它，然后开始；
每一次旋转机械番茄钟直到倒计时归零，会有一种获得一个番茄的形式感，这是软件番茄钟完成时的震动或声音提示无法给予的。
但软件钟的优点是自动累计和统计，记录番茄数上更便利，因为可以更容易获得反馈。</p>
<p>我在纯机械钟和纯软件钟之间选择了折衷方案——官方特许的一种电子钟（基于电池、彩色液晶屏和单片机）。
它可以很方便的开始、结束、暂停番茄，并且可以设置一个番茄的工作和休息时间，且能自动统计番茄数量，这些对我来说就足够了。</p>
<img alt="官方特许番茄钟" src="https://kaffa.im/img/2020/pomodoro-clock-2.png" />
</div>
<div class="section" id="section-5">
<h2>设计上存在的问题</h2>
<p>在使用了一个月后，我简单记录一下设计上值得改进之处。</p>
<p>1. 在用液晶显示时间时，通常是 <tt class="docutils literal">08:01</tt> 的形式，即 <tt class="docutils literal">两位分钟数:两位秒钟数</tt>，且分钟数和秒钟数大小一致。为将番茄数量显示在右上方的设计，会牺牲秒钟数的大小，
这样做会有两个缺点：一、秒钟数变小削弱了时间的流逝感；二、让用户在本不用思考的地方产生一次思维停顿，打破分钟数和秒钟数大小一致的设计常规并没未产生价值，只增加了一点微弱的 GEEK 感。</p>
<p>2. 下方设计了四个按钮，分别是 <tt class="docutils literal">番茄</tt>、<tt class="docutils literal">工作</tt>、<tt class="docutils literal">休息</tt>、<tt class="docutils literal">小花</tt>。不得不说这四个按键的设计存在很多问题，首先是图标的意义上 <tt class="docutils literal">番茄</tt> 和 <tt class="docutils literal">小花</tt> 并不恰当，并没有和功能有直接的对应。
其次， <tt class="docutils literal">工作</tt> 和 <tt class="docutils literal">休息</tt> 更多像一个状态显示，而不是功能切换，当工作结束，<tt class="docutils literal">休息</tt> 会自动亮起来，此时想跳过休息按 <tt class="docutils literal">工作</tt> 和 <tt class="docutils literal">小花</tt> 并不能开始一个新番茄，而会显示一个 Err（错误），
正确的做法是按 <tt class="docutils literal">番茄</tt>，然后按 <tt class="docutils literal">小花</tt>。你感觉一下是不是很别扭。这里存在的问题是：一、按钮混淆了操作和状态，二、按钮图标的常规意义和功能不一致。</p>
</div>
<div class="section" id="section-6">
<h2>更好的设计</h2>
<p>梳理用户的需求：</p>
<ol class="arabic simple">
<li>功能需求：可以开始、停止番茄；可以终止番茄（非必须）；可以设置工作和休息时长；可统计番茄数，如果有内时钟，则可统计年、月、周、日的番茄数（非必须）。</li>
<li>非功能需求：以最简的方式开始番茄，这点上 App 完败。假设番茄放在面前，机械钟只需要一次旋转，电子钟只需要一次点击（开机后），而App则需要先点击启动（至少2秒）再加至少一次点击。</li>
</ol>
<p>更好的设计：</p>
<ol class="arabic simple">
<li>设置四个按钮：<tt class="docutils literal">设置</tt>、<tt class="docutils literal">工作</tt>、<tt class="docutils literal">休息</tt>、<tt class="docutils literal">开始/结束</tt>。明确，清晰。</li>
<li>去掉按钮的长按进入某种设置状态的潜规则，而采用按 <tt class="docutils literal">设置</tt> 键切换。</li>
<li>按``设置``键后，<tt class="docutils literal">工作</tt>、 <tt class="docutils literal">休息</tt> 显示为 <tt class="docutils literal">+</tt>、<tt class="docutils literal">-</tt> 或 <tt class="docutils literal">&lt;</tt>、<tt class="docutils literal">&gt;</tt>，此时进入一系列的设置，比如增减工作时长，增减休息时长，语言切换，震动或语音，重置番茄数等。</li>
<li>增强数量统计功能，将统计从秒钟数的上方移到顶部，作为一整条，变成显示年月周日番茄数，可记录一年或多年的番茄数。</li>
<li>将分钟数和秒钟数等大小显示。根据设计心理学的格式塔原则，倒计时的分针和秒针应为一个整体，而不是大小分割的。</li>
<li>甚至可使用“奥卡姆剃刀”原则，将 <tt class="docutils literal">工作</tt> 和 <tt class="docutils literal">休息</tt> 去掉，使用背景色来显示状态（绿色表示休息），利用按和长按（2秒以上）分别表示增加减少或左右切换。
这也是从儿时的电子表到今天的耳机播放键切换歌曲的默认模式，用户已被传统电子产品教育后习得了这些习惯，但这样做会牺牲掉一些毫无经验的用户，这就要看这类用户是否是番茄钟的使用者了。</li>
</ol>
</div>
<div class="section" id="section-7">
<h2>总结</h2>
<p>期待这个番茄钟能有改进后的新版本推出，或者等我有空时，会实现 HTML5 的原型替代之（挖坑）。</p>
<p>感谢阅读。</p>
</div>
</div>
    <footer>
<p class="meta">
  <span class="byline author vcard">
    发布人： <span class="fn">
        Kaffa
    </span>
  </span>
<time datetime="2020-12-03T12:00:00+08:00" pubdate>2020-12-03 周四</time>  <span class="categories">
    <a class='category' href='./category/sui-bi.html'>随笔</a>
  </span>
  <span class="categories">
    <a class="category" href="./tag/sui-bi.html">随笔</a>,    <a class="category" href="./tag/essays.html">Essays</a>,    <a class="category" href="./tag/bo-ke.html">博客</a>,    <a class="category" href="./tag/my-blog.html">My Blog</a>,    <a class="category" href="./tag/fan-qie-gong-zuo-fa.html">番茄工作法</a>,    <a class="category" href="./tag/pomodoro-technique.html">Pomodoro Technique</a>,    <a class="category" href="./tag/fan-qie-zhong.html">番茄钟</a>,    <a class="category" href="./tag/pomodoro-clock.html">Pomodoro Clock</a>  </span>
</p><div class="sharing">
</div>    </footer>
    <div id="gitalk-container"></div>
  </article>

</div>

<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script>
  var gitalk = new Gitalk({
    clientID: '47c6091c4039fb3df197',
    clientSecret: '8ed206e3b86fb7a90a0dd78d4ed3425d7384b45a',
    repo: 'kaffa.github.io',
    owner: 'kaffa',
    admin: ['kaffa'],
    id: location.pathname.substr(0, 50),
    distractionFreeMode: false
  });
  gitalk.render('gitalk-container');
</script>

<aside class="sidebar">
  <section>
    <h1>最近博文</h1>
    <ul id="recent_posts">
      <li class="post">
          <a href="./hario-mss-1b-mss-1r-16.html">手摇磨豆器-HARIO-MSS-1B-MSS-1R-16-的 12 个零件</a>
      </li>
      <li class="post">
          <a href="./article-39-chapter-iv-of-labor-contract-law-of-China-and-buber-and-drip-bag-coffee.html">公司为什么会选择违法解除劳动合同、包焙儿和挂耳咖啡</a>
      </li>
      <li class="post">
          <a href="./review-2022.html">2022 回顾</a>
      </li>
      <li class="post">
          <a href="./things-in-the-past-half-year-of-2022.html">2022H2半年小记</a>
      </li>
      <li class="post">
          <a href="./alaunch-your-first-productivity-software.html">ALaunch第一个生产力工具</a>
      </li>
    </ul>
  </section>
  <section>

    <h1>分类</h1>
    <ul id="recent_posts">
        <li><a href="./category/ren-wen.html">人文</a></li>
        <li><a href="./category/ri-zhi.html">日志</a></li>
        <li><a href="./category/sui-bi.html">随笔</a></li>
        <li><a href="./category/yue-du.html">阅读</a></li>
        <li><a href="./category/zi-ran.html">自然</a></li>
    </ul>
  </section>

  <section>
  <h1>标签</h1>
    <a href="./tag/sui-bi.html">随笔</a>,    <a href="./tag/essays.html">Essays</a>,    <a href="./tag/ka-pei.html">咖啡</a>,    <a href="./tag/mo-dou-qi.html">磨豆器</a>,    <a href="./tag/hario.html">Hario</a>,    <a href="./tag/ren-sheng.html">人生</a>,    <a href="./tag/life.html">Life</a>,    <a href="./tag/bao-bei-er.html">包焙儿</a>,    <a href="./tag/yue-du.html">阅读</a>,    <a href="./tag/reading.html">Reading</a>,    <a href="./tag/ruan-jian.html">软件</a>,    <a href="./tag/software.html">Software</a>,    <a href="./tag/ji-zhu.html">技术</a>,    <a href="./tag/technology.html">Technology</a>,    <a href="./tag/alaunch.html">ALaunch</a>,    <a href="./tag/productive.html">Productive</a>,    <a href="./tag/bo-ke.html">博客</a>,    <a href="./tag/my-blog.html">My Blog</a>,    <a href="./tag/gitee-pages.html">Gitee Pages</a>,    <a href="./tag/playwright.html">PlayWright</a>,    <a href="./tag/gong-zuo-guan.html">工作观</a>,    <a href="./tag/view-of-work.html">view-of-work</a>,    <a href="./tag/cat.html">Cat</a>,    <a href="./tag/mao.html">猫</a>,    <a href="./tag/wang-wen.html">网文</a>,    <a href="./tag/dian-shi-ju.html">电视剧</a>,    <a href="./tag/ke-bi-bu-lai-en-te.html">科比·布莱恩特</a>,    <a href="./tag/kobe-bryant.html">Kobe Bryant</a>,    <a href="./tag/luo-shan-ji-zao-chen-si-dian.html">洛杉矶早晨四点</a>,    <a href="./tag/los-angeles-morning-4am.html">Los Angeles Morning 4AM</a>,    <a href="./tag/markdown.html">Markdown</a>,    <a href="./tag/markdown-grammar.html">Markdown Grammar</a>,    <a href="./tag/mkdocs.html">MkDocs</a>,    <a href="./tag/hugo.html">Hugo</a>,    <a href="./tag/resume.html">Résumé</a>,    <a href="./tag/fan-qie-gong-zuo-fa.html">番茄工作法</a>,    <a href="./tag/pomodoro-technique.html">Pomodoro Technique</a>,    <a href="./tag/fan-qie-zhong.html">番茄钟</a>,    <a href="./tag/pomodoro-clock.html">Pomodoro Clock</a>,    <a href="./tag/semantic-ui.html">Semantic-UI</a>,    <a href="./tag/nodejs.html">nodejs</a>,    <a href="./tag/pplusplus.html">PPlusPlus</a>,    <a href="./tag/faq.html">FAQ</a>,    <a href="./tag/zeev-suraski.html">Zeev Suraski</a>,    <a href="./tag/internals.html">internals@</a>,    <a href="./tag/php.html">PHP</a>,    <a href="./tag/p.html">P++</a>,    <a href="./tag/rasmus-lerdorf.html">Rasmus Lerdorf</a>,    <a href="./tag/pplusplus-faq.html">PPlusPlus FAQ</a>,    <a href="./tag/microsoft-designer-mouse.html">Microsoft Designer Mouse</a>,    <a href="./tag/linux-distributions.html">Linux Distributions</a>,    <a href="./tag/arch-linux.html">Arch Linux</a>,    <a href="./tag/centos.html">CentOS</a>,    <a href="./tag/debian.html">Debian</a>,    <a href="./tag/elementary-os.html">Elementary OS</a>,    <a href="./tag/fedora.html">Fedora</a>,    <a href="./tag/freebsd.html">FreeBSD</a>,    <a href="./tag/gentoo.html">Gentoo</a>,    <a href="./tag/linux-from-scratch.html">Linux From Scratch</a>,    <a href="./tag/linux-mint.html">Linux Mint</a>,    <a href="./tag/netbsd.html">NetBSD</a>,    <a href="./tag/opensuse.html">openSuse</a>,    <a href="./tag/red-hat-enterprise-linux.html">Red Hat Enterprise Linux</a>,    <a href="./tag/slackware.html">Slackware</a>,    <a href="./tag/ubuntu.html">Ubuntu</a>,    <a href="./tag/restructuretext.html">reStructureText</a>,    <a href="./tag/restructuredtext-grammar.html">reStructuredText Grammar</a>,    <a href="./tag/vscode-extension.html">VSCode Extension</a>,    <a href="./tag/vsce.html">vsce</a>,    <a href="./tag/visual-studio-marketplace.html">Visual Studio Marketplace</a>,    <a href="./tag/macos.html">macOS</a>,    <a href="./tag/mac-os.html">Mac OS</a>,    <a href="./tag/macos-history.html">macOS History</a>,    <a href="./tag/machintosh.html">Machintosh</a>,    <a href="./tag/beos.html">BeOS</a>,    <a href="./tag/next.html">NeXT</a>,    <a href="./tag/openstep.html">OPENSTEP</a>,    <a href="./tag/mach.html">Mach</a>,    <a href="./tag/ren-wen.html">人文</a>,    <a href="./tag/humanity.html">Humanity</a>,    <a href="./tag/luo-ji-xue.html">逻辑学</a>,    <a href="./tag/logic.html">Logic</a>,    <a href="./tag/ke-ji-suan-xing.html">可计算性</a>,    <a href="./tag/shi-wu.html">事物</a>,    <a href="./tag/shi-jian.html">事件</a>,    <a href="./tag/shi-shi.html">事实</a>,    <a href="./tag/guan-nian.html">观念</a>,    <a href="./tag/ming-ti.html">命题</a>,    <a href="./tag/duan-yan.html">断言</a>,    <a href="./tag/yan-yi.html">演绎</a>,    <a href="./tag/gui-na.html">归纳</a>,    <a href="./tag/san-duan-lun.html">三段论</a>,    <a href="./tag/tong-yi-lu.html">同一律</a>,    <a href="./tag/pai-zhong-lu.html">排中律</a>,    <a href="./tag/yin-guo-lu.html">因果律</a>,    <a href="./tag/mao-dun-lu.html">矛盾律</a>,    <a href="./tag/zi-ran.html">自然</a>,    <a href="./tag/natural-science.html">Natural Science</a>,    <a href="./tag/xiong-ji-diao.html">胸棘鲷</a>,    <a href="./tag/orange-roughy.html">Orange Roughy</a>,    <a href="./tag/chang-shou-yu.html">长寿鱼</a>,    <a href="./tag/hua-shi-ren-lei-xue.html">化石人类学</a>,    <a href="./tag/gu-ren-lei-xue.html">古人类学</a>,    <a href="./tag/zhi-ren.html">智人</a>,    <a href="./tag/homo-sapiens.html">Homo sapiens</a>,    <a href="./tag/ni-an-de-te-ren.html">尼安德特人</a>,    <a href="./tag/homo.html">Homo</a>,    <a href="./tag/neanderthals.html">Neanderthals</a>,    <a href="./tag/sheng-zhi-ge-chi.html">生殖隔离</a>,    <a href="./tag/ji-yin-ce-xu.html">基因测序</a>,    <a href="./tag/ji-suan-ji-ke-xue.html">计算机科学</a>,    <a href="./tag/computer-science.html">Computer Science</a>,    <a href="./tag/dian-zi-gong-cheng.html">电子工程</a>,    <a href="./tag/electronic-engineering.html">Electronic Engineering</a>,    <a href="./tag/ruan-jian-gong-cheng-xue.html">软件工程学</a>,    <a href="./tag/software-engineering.html">Software Engineering</a>,    <a href="./tag/xin-xi-ji-zhu.html">信息技术</a>,    <a href="./tag/information-technology.html">Information Technology</a>,    <a href="./tag/geetest.html">GeeTest</a>,    <a href="./tag/windows.html">Windows</a>,    <a href="./tag/linux.html">Linux</a>,    <a href="./tag/jekyll.html">Jekyll</a>,    <a href="./tag/ruby.html">Ruby</a>,    <a href="./tag/msys2.html">MSYS2</a>,    <a href="./tag/vibora.html">Vibora</a>,    <a href="./tag/cygwin.html">Cygwin</a>,    <a href="./tag/mingw.html">MinGW</a>,    <a href="./tag/virtualpc.html">Virtualpc</a>,    <a href="./tag/vmware.html">VMWare</a>,    <a href="./tag/docker.html">Docker</a>,    <a href="./tag/msys.html">MSYS</a>,    <a href="./tag/msysgit.html">msysgit</a>,    <a href="./tag/pelican.html">Pelican</a>,    <a href="./tag/gitalk.html">Gitalk</a>,    <a href="./tag/gitment.html">Gitment</a>,    <a href="./tag/pelican-octopress-theme.html">Pelican Octopress Theme</a>,    <a href="./tag/pelican-octopress-theme-cn.html">pelican-octopress-theme-cn</a>,    <a href="./tag/node.html">Node</a>,    <a href="./tag/path.html">Path</a>,    <a href="./tag/psychology.html">Psychology</a>,    <a href="./tag/philosophy.html">Philosophy</a>,    <a href="./tag/nwjs.html">NW.js</a>,    <a href="./tag/electron.html">Electron</a>,    <a href="./tag/qrcode.html">QRCode</a>,    <a href="./tag/text-qrcode.html">Text QRCode</a>,    <a href="./tag/wechaty.html">Wechaty</a>,    <a href="./tag/open-source.html">Open Source</a>,    <a href="./tag/vscode.html">VSCode</a>,    <a href="./tag/linux-kernel.html">Linux Kernel</a>,    <a href="./tag/data.html">Data</a>,    <a href="./tag/information.html">Information</a>,    <a href="./tag/restructuredtext.html">reStructuredText</a>,    <a href="./tag/rst.html">rst</a>,    <a href="./tag/blog.html">Blog</a>,    <a href="./tag/zi-ding-yi-yu-ming.html">自定义域名</a>,    <a href="./tag/custom-domain.html">Custom Domain</a>,    <a href="./tag/github-pages.html">GitHub Pages</a>,    <a href="./tag/cname.html">CNAME</a>,    <a href="./tag/ji-zhu-zhi-shi-fen-lei.html">技术知识分类</a>,    <a href="./tag/technology-category.html">Technology Category</a>,    <a href="./tag/wen-ti-jie-jue.html">问题解决</a>,    <a href="./tag/problem-solving.html">Problem Solving</a>,    <a href="./tag/biao-ji-yu-yan.html">标记语言</a>,    <a href="./tag/octopress.html">octopress</a>,    <a href="./tag/asciidoc.html">AsciiDoc</a>  </section>


    <section>
        <h1>社区</h1>
        <ul>
            <li><a href="https://github.com/kaffa" target="_blank">My GitHub</a></li>
        </ul>
    </section>
    <section>
        <h1>链接</h1>
        <ul>
            <li><a href="http://paulgraham.com" target="_blank">Paul Graham</a></li>
            <li><a href="https://gvanrossum.github.io/" target="_blank">Guido van Rossum</a></li>
            <li><a href="https://kaffa.im" target="_blank">Kaffa</a></li>
            <li><a href="https://coffees.app" target="_blank">Coffee's</a></li>
            <li><a href="https://lundao.pub/" target="_blank">论道</a></li>
        </ul>
    </section>

</aside>    </div>
  </div>
  <footer role="contentinfo"><p>
    版权所有 &copy;  2018&ndash;2023  Kaffa &mdash;
  <span class="credit">自豪地采用 <a href="http://getpelican.com">Pelican</a> 技术</span>
</p></footer>
  <script src="./theme/js/modernizr-2.0.js"></script>
  <script src="./theme/js/ender.js"></script>
  <script src="./theme/js/octopress.js" type="text/javascript"></script>
  
</body>
</html>